<template>
    <div class="">
        <ezm-layout>
            <van-nav-bar
                    slot="nav"
                    title="下拉刷新演示"
                    left-arrow
                    @click-left="g_navigate.back()"
            ></van-nav-bar>
            <ezm-scroll-box
                    :pull-down="true"
                    :paginate="paginate"
            >
                <van-cell
                        v-for="item in list" :key="item.id"
                        :title="item.title"
                        :label="item.label"
                        :value="item.id"
                ></van-cell>
            </ezm-scroll-box>
        </ezm-layout>
    </div>
</template>

<script>
    import EzmLayout from "@/components/layout/ezm-layout";
    import EzmScrollBox from "@/components/scroll/ezm-scroll-box";
    import Paginate from "@/utils/paginate.util";
    import {mockUtil} from "@/utils/common.util";
    import {request} from "@/utils/request.util";
    import {PageMixin} from "@/mixin/navigate.mixin";

    export default {
        name: 'BetterScrollPullDown',
        mixins: [PageMixin],
        components: {EzmScrollBox, EzmLayout},
        props: {},
        data() {
            return {
                paginate: new Paginate(this.getList),
                list: [],
            }
        },
        computed: {},
        watch: {},
        created() {
        },
        mounted() {
        },
        destroyed() {
        },
        methods: {
            init() {
                this.paginate.autoPullDown();
            },
            getList(refresh = false) {
                this.mockData();
                request('BetterScrollPullDown').get(this.paginate.getRequestParams()).then(resp => {
                    this.list = resp.records;
                    this.paginate.finishLoading(resp);
                }).catch(() => this.paginate.finishLoading());
            },
            mockData() {
                mockUtil.mock(/BetterScrollPullDown/i, 'get', {
                    code: 200,
                    message: '',
                    data: {
                        current: 1,
                        size: this.paginate.size,
                        'records|20': [{
                            'id|+1': 1,
                            'title': '@cname',
                            'label': '@name',
                        }]
                    }
                })
            }
        }
    };
</script>

<style lang="less">

</style>